<template>
  <div>
    <div style="display: flex">
      <ul v-show="imgList.length > 0" class="file-list-wrap">
        <li
          v-for="(item,index) in imgList"
          :key="item.uid || index"
          class="file-list-item"
        >
          <img :src="item.url" alt="" class="file-list-item-img">
          <span class="file-list-item-action">
            <i class="el-icon-zoom-in" @click="handlePreview(item)" />
            <i v-if="showDel" class="el-icon-delete" @click="handleFileRemove(item)" />
          </span>
        </li>
      </ul>
      <el-upload
        v-if="isUploadBtn"
        ref="upload"
        action=""
        accept="image/*"
        list-type="picture-card"
        :show-file-list="false"
        :class="{hide: imgList.length >= fileNum}"
        :before-upload="beforeUpload"
        :http-request="handleHttpRequest"
        :limit="fileNum"
        :multiple="fileNum > 1"
        :file-list="imgList"
      >
        <i slot="default" class="el-icon-plus" />
      </el-upload>
    </div>
    <el-dialog :visible.sync="picDialogVisible" title="图片预览" append-to-body>
      <img width="100%" :src="picDialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
import { uploadImg } from '@/api/upImage'
export default {
  name: 'CommonUpload',
  props: {
    signObj: {
      type: Object,
      default: () => {}
    },
    defImgList: {
      type: Array,
      default: () => []
    },
    fileNum: {
      type: Number,
      default: 1
    },
    maxSize: {
      type: Number,
      default: 10 * 1024 * 1024
    },
    showDel: {
      type: Boolean,
      default: true
    },
    isUploadBtn: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      imgList: [],
      picDialogImageUrl: '',
      picDialogVisible: false
    }
  },
  watch: {
    defImgList: {
      handler(newVal) {
        this.imgList = newVal
      },
      deep: true
    }
  },
  methods: {
    // 图片上传处理开始
    beforeUpload(file) {
      console.log('beforeUpload===')
      const isImg = file.type && file.type.indexOf('image/') === 0
      if (!isImg) {
        this.$message.error('请选择图片文件!')
      }
      const isLtSize = file.size < this.maxSize
      if (!isLtSize) {
        this.$message.error('上传图片大小不能超过2MB!')
      }
      return isImg && isLtSize
    },
    handlePreview(data) {
      this.picDialogImageUrl = data.url
      this.picDialogVisible = true
    },
    handleFileRemove(data) {
      console.log('handleFileRemove===')
      this.imgList = this.imgList.filter(item => item.url !== data.url)
      this.$emit('updateFileList', this.imgList)
    },
    handleHttpRequest(param) {
      console.log('handleHttpRequest===', param, this.signObj)
      uploadImg(this.signObj, param.file).then(res => {
        console.log('res', res)
        if (res) {
          this.imgList.push({
            uid: param.file.uid,
            url: res
          })
          this.$emit('updateFileList', this.imgList)
        }
      })
    }
  }
}
</script>

<style lang="scss">
.hide {
  .el-upload--picture-card {
    display: none !important;
  }
}
.el-upload--picture-card {
  width: 82px;
  height: 82px;
  line-height: 86px;
}
</style>
<style lang="scss" scoped>
.file-list-wrap {
  list-style: none;
  padding-inline-start: 0;
  margin-block-start: 0;
  margin-block-end: 0;
  line-height: 10px;
}
.file-list-item {
  overflow: hidden;
  background-color: #fff;
  border: 1px solid #c0ccda;
  border-radius: 6px;
  box-sizing: border-box;
  width: 82px;
  height: 82px;
  margin: 0 8px 0 0;
  display: inline-block;
  position: relative;
}
.file-list-item-img {
  width: 80px;
  height: 80px;
  border-radius: 6px;
}
.file-list-item-action {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  cursor: default;
  text-align: center;
  color: #fff;
  opacity: 0;
  font-size: 20px;
  background-color: rgba(0,0,0,.5);
  transition: opacity .3s;
  line-height: 80px;
  &:hover {
    opacity: 1;
  }
}
</style>
